<template>
	<scroll-view scroll-y="true" :style="'height:'+props.swiperHeight+'px'" @scrolltolower="loadMore">
	<view class="recommend-content">
		<!-- 轮播图部分 -->
		<up-swiper indicatorStyle="right: 20px" :indicator="true" :list="swiperList.value">
		</up-swiper>
		<!-- 新上好课 -->
		<view class="recommend-new-class">
			<view class="recommend-title">新上好课</view>
			<course-card :list="mostNewList.value"></course-card>
		</view>
		<!-- 推荐好课 -->
		<view class="recommend-good-class">
			<view class="recommend-title">
				<view>推荐好课</view>
				<view class="recommend-look-more">
					查看更多
				</view>
			</view>
			 <scroll-view class="recommend-scroll-view" scroll-x="true">
					<view class="recommend-good-card" v-for="item in mostHeatList.value" :key="item.id">
						<image :src="item.courseCover"/>
						<view class="recommend-good-level">{{filterLevel(item.courseLevel)}} · {{formateNum(item.clicks)}}人报名</view>
						<view class="recommend-good-money">
							<view>¥{{item.discountPrice}}</view>
							<view>¥{{item.salePrice}}</view>
						</view>
						<view class="recommend-good-desc">限时优惠</view>
					</view>
			</scroll-view>
		</view>
		<!-- 大家都在看 -->
		<view class="recommend-new-class">
			<view class="recommend-title">大家都在看</view>
			<course-card :list="courseList.value"></course-card>
		</view>
	</view>
	</scroll-view>
</template>


<script setup>
	import {ref,reactive,defineExpose,toRaw,defineProps} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import {getSliders,getMostNew,getMostHeat,searchCourse} from '../../api/home.js'
	import {formateNum} from '../../utils/format.js'
	import courseCard from '../common/card.vue'
	const props = defineProps({
		swiperHeight: Number
	})
	const pageNum = ref(1)
	const courseList = reactive([])
	const isFinish = ref(false)
	const pageSize = ref(10)
	const swiperList = reactive([])
	const mostNewList = reactive([])
	const mostHeatList = reactive([])
	const filterLevel = (level)=>{
			
		if (level == 1) {
			return '初级'
		}
		if (level == 2) {
			return '中级'
		}
		if (level == 3) {
			return '高级'
		}
		return ''
	}
	
	const getList = () =>{
		let obj =  {
			pageNum: pageNum.value,
			pageSize: pageSize.value
		}
		searchCourse(obj).then(res=>{ 
			let list = [...res.data.pageInfo.list]
			if (list.length) {
				courseList.value = toRaw(courseList.value) ? [...toRaw(courseList.value),...list] : list
				isFinish.value = list.length < pageSize.value ?  true : false
			}
			
		})
	}
	const initList = ()=> {
		pageNum.value = 1
		courseList.value = []
		isFinish.value = false
		getSliders().then(res => {
			swiperList.value = res.data.list.map(item => {
				return item.imageUrl
			})
		})
		getMostNew({pageNum: 1,pageSize: 3}).then(res=>{
			mostNewList.value = res.data.pageInfo.list
		})
		getMostHeat({pageNum: 1,pageSize: 6}).then(res=>{
			mostHeatList.value = res.data.pageInfo.list
		})
		getList()
	}
	const loadMore = ()=>{
		if (isFinish.value) return
		pageNum.value++
		getList()
	}
	defineExpose({
		initList
	})
</script>

<style lang="scss">
	.recommend-content {
		.u-swiper {
			margin: 20rpx 20rpx 0 20rpx;
			border-radius: 20px;

		}

		.recommend-new-class {
			margin: 0 20rpx;
		}
		.recommend-title {
			font-size: 35rpx;
			font-weight: 700;
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.recommend-look-more{
			color: #c8c8cd;
			font-size: 25rpx;
		}
		
		.recommend-good-class{
			margin: 20rpx 20rpx 0 20rpx;
			.recommend-scroll-view{
				height: 800rpx;
			}
			::v-deep .uni-scroll-view-content {
				width: 1090rpx;
				display: flex;
				flex-wrap:wrap;
			}
			.recommend-good-card{
				border-radius: 10rpx;
				box-shadow: 1rpx 10rpx 10rpx gray;
				width: 350rpx;
				margin-bottom: 20rpx;
				margin-right: 20rpx;
				>image{
					border-radius: 10rpx;
					width: 100%;
					height: 200rpx;
				}
				.recommend-good-level{
					color: #c8c8cd;
					margin: 10rpx;
					font-size: 25rpx;
				}
					
				.recommend-good-money{
					display: flex;
					justify-content: space-between;
					padding: 0 15rpx;
					>:nth-child(1) {
						color: red;
						font-size: 30rpx;
						font-weight: 700;
					}
					>:nth-child(2) {
						color: #c8c8cd;
						font-size: 20rpx;
						text-decoration: line-through;
					}
				}
				.recommend-good-desc{
					color: red;
					font-size: 25rpx;
					padding: 10rpx;
				}
					
				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
		.view-hover:hover{
			transform: scale(1.02);
			box-shadow: 2rpx 10rpx 10rpx gray;
			transition: transform 0.3s ease;
		}
	}
</style>